<template>
  <el-card class="container-card">
    <el-form inline :rules="rules" :model="attr" ref="form">
      <el-form-item label="属性名" prop="attrName">
        <el-input v-model="attr.attrName"></el-input>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!attr.attrName"
      @click="addAttrValue"
    >
      添加属性值
    </el-button>
    <el-table :data="attr.attrValueList" border class="container-table">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="属性值名称">
        <template v-slot="{ row, $index }">
          <el-input
            :ref="$index"
            size="mini"
            placeholder="请输入属性值名称"
            v-model="row.valueName"
            @blur="attrValueBlur(row, $index)"
            @keyup.enter.native="$event.target.blur()"
            v-show="row.isEdit"
          ></el-input>
          <div @click="attrValueFocus(row, $index)" v-show="!row.isEdit">
            {{ row.valueName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @onConfirm="delAttrValue($index)"
          >
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="saveAttr">确定</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-card>
</template>

<script>
import { reqSaveAttr } from '@/api/product/attr'
import { mapState } from 'vuex'
export default {
  name: 'addAttr',
  data() {
    return {
      attr: {
        attrName: '',
        attrValueList: []
      },
      rules: {
        attrName: { required: true, message: '请输入属性名', trigger: 'blur' }
      }
    }
  },
  mounted() {
    if (this.editAttr.id) {
      const {
        attrName,
        attrValueList,
        categoryId,
        categoryLevel,
        id
      } = this.editAttr
      this.attr.id = id
      this.attr.attrName = attrName
      this.attr.categoryLevel = categoryLevel
      this.attr.categoryId = categoryId
      this.attr.attrValueList = attrValueList.map(vl => {
        return {
          ...vl,
          isEdit: false
        }
      })
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  props: {
    editAttr: {
      type: Object,
      default: {}
    }
  },
  methods: {
    addAttrValue() {
      const { attrValueList } = this.attr
      attrValueList.push({
        valueName: '',
        isEdit: true
      })
      this.$nextTick(() => {
        this.$refs[attrValueList.length - 1].focus()
      })
    },
    attrValueBlur(attrValue, $index) {
      attrValue.isEdit = false
      if (!attrValue.valueName.trim()) {
        this.attr.attrValueList.splice($index, 1)
      }
    },
    attrValueFocus(attrValue, $index) {
      attrValue.isEdit = true
      this.$nextTick(() => {
        this.$refs[$index].focus()
      })
    },
    delAttrValue($index) {
      this.attr.attrValueList.splice($index, 1)
    },
    cancel() {
      this.$emit('isUpdateShowAttrList', true)
    },
    async saveAttr() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        const { id, attrName, attrValueList: oldAttrValueList } = this.attr
        if (!oldAttrValueList.length) {
          this.$message.error('请至少添加一个属性值')
          return
        }
        const attrValueList = oldAttrValueList.map(attrValue => {
          return { valueName: attrValue.valueName }
        })
        const attr = {
          id,
          attrName,
          attrValueList,
          categoryId: this.category3Id,
          categoryLevel: 3
        }
        await reqSaveAttr(attr)
        this.cancel()
      })
    }
  }
}
</script>

<style></style>
